<template>
  <div>
    <div class="add appBox">
      <el-form ref="ruleFormRef"
               :model="ruleForm"
               status-icon
               :rules="rules"
               label-width="130px"
               label-position="right"
               class="demo-ruleForm">
        <div class="top flex_sb">
          <div class="flex left">
            <div class="cup flex"
                 @click="back">
              <el-icon size="18">
                <Back />
              </el-icon>
              <div class="ruturn">返回</div>
            </div>
            <div class="title">{{ boxTitle }}</div>
          </div>
          <div>
            <el-button v-preventReClick
                       type="primary"
                       @click="submit(ruleFormRef)">
              保 存
            </el-button>
          </div>
        </div>
        <div class="flex content">
          <div class="left">
            <div class="f16 fb mt20 tac c0">职位描述预览</div>
            <div class="pl10 pr10 pb10 editorTable editorPreview">
              <div v-html="ruleForm.remark">

              </div>
              <!-- <Editor ref="EditorBox"
                      @changeEditor="changeEditor"></Editor> -->
            </div>
          </div>
          <div class="right">
            <div class="formBox">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="职位名称："
                                prop="name">
                    <el-input v-model="ruleForm.name"
                              @input="ruleForm.name = $input.inputLimit('D10012',ruleForm.name)"
                              placeholder="请填写职位名称"
                              maxlength="30"
                              clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工作经验："
                                prop="experienceNeeded">
                    <el-select v-model="ruleForm.experienceNeeded"
                               placeholder="请选择工作经验"
                               clearable>
                      <el-option v-for="i in positionYear"
                                 :key="i"
                                 :value="i.id"
                                 :label="i.dictValue"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="5">
                  <el-form-item label="工作经验"
                                style="width: 225px"
                                prop="startYear">
                    <el-input v-model="ruleForm.startYear"
                              @input="ruleForm.startYear = $input.inputLimit('D10009',ruleForm.startYear)"
                              placeholder="最小工作经验"
                              clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="1">
                  <el-form-item label-position="center"
                                label="至"
                                prop="">
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item style="width: 125px"
                                label=""
                                label-width="0px"
                                prop="endYear">
                    <el-input v-model="ruleForm.endYear"
                              @input="ruleForm.endYear = $input.inputLimit('D10009',ruleForm.endYear)"
                              placeholder="最大工作经验"
                              clearable /> </el-form-item>
                </el-col> -->
                <el-col :span="12">
                  <el-form-item label="职位类型："
                                prop="typeId">
                    <el-select v-model="ruleForm.typeId"
                               class="m-2"
                               filterable
                               placeholder="请选择职位类型">
                      <el-option v-for="item in ZD.positionType"
                                 :key="item.value"
                                 :label="item.dictValue"
                                 :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                  <el-form-item label="年龄要求："
                                prop="age">
                    <el-select v-model="ruleForm.age"
                               placeholder="请选择年龄要求"
                               clearable>
                      <el-option v-for="i in positionAge"
                                 :key="i"
                                 :label="i.label"
                                 :value="i.value"></el-option>

                    </el-select>
                  </el-form-item>
                </el-col> -->

                <el-col :span="12">
                  <el-form-item label="面试地址："
                                prop="meetAddr">
                    <el-input v-model="ruleForm.meetAddr"
                              @input="ruleForm.meetAddr = $input.inputLimit('D10006',ruleForm.meetAddr)"
                              placeholder="请选择面试地址"
                              clearable
                              @click="showMap('面试地址',ruleForm.meetAddr)" /> </el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="薪资结算："
                                prop="salaryType">
                    <el-select v-model="ruleForm.salaryType"
                               class="m-2"
                               @change="ruleForm.salaryStart = '',ruleForm.salaryEnd = ''"
                               placeholder="请选择薪资结算">
                      <el-option label="日结"
                                 :value="0"></el-option>
                      <el-option label="月薪"
                                 :value="1"></el-option>
                      <!-- <el-option label="年薪"
                                 :value="2"></el-option> -->
                    </el-select> </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label=" 班次："
                                prop="workTypeId">
                    <el-select v-model="ruleForm.workTypeId"
                               class="m-2"
                               placeholder="请选择班次">
                      <el-option v-for="item in options.workTypeId"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value" />
                    </el-select> </el-form-item></el-col>

                <el-col :span="12">
                  <el-form-item label="薪资范围："
                                prop="salaryStart">
                    <!-- <el-select v-model="ruleForm.salary"
                               v-if="ruleForm.salaryType == 1"
                               placeholder="请选择薪资范围"
                               clearable>
                      <el-option v-for="i in positionSalary"
                                 :key="i"
                                 :label="i.label"
                                 :value="i.value"></el-option>

                    </el-select>
                    <el-select v-model="ruleForm.salary"
                               v-if="ruleForm.salaryType == 0"
                               placeholder="请选择薪资范围"
                               clearable>
                      <el-option v-for="i in positionDayMoney"
                                 :key="i"
                                 :label="i.label"
                                 :value="i.value"></el-option>

                    </el-select> -->
                    <el-input v-model="ruleForm.salaryStart"
                              class="salaryInputBox"
                              @input="ruleForm.salaryStart = $input.inputLimit('D10009',ruleForm.salaryStart)"
                              placeholder="最小薪资"
                              clearable>
                      <template #append>元</template>
                    </el-input>
                    &emsp; 至 &emsp;
                    <el-form-item label=""
                                  label-width="0px"
                                  class="salaryInputBox"
                                  prop="salaryEnd">
                      <el-input @input="ruleForm.salaryEnd = $input.inputLimit('D10009',ruleForm.salaryEnd)"
                                v-model="ruleForm.salaryEnd"
                                placeholder="最大薪资"
                                clearable>
                        <template #append>元</template>
                      </el-input>
                    </el-form-item>
                  </el-form-item>

                </el-col>
                <el-col :span="12">
                  <el-form-item label="用工时间："
                                prop="">
                    <el-input v-model="ruleForm.employmentTime"
                              @input="ruleForm.employmentTime = $input.inputLimit('D10009',ruleForm.employmentTime)"
                              clearable
                              placeholder="请输入用工时间"><template #append>天</template></el-input>
                  </el-form-item></el-col>

                <el-col :span="12">
                  <el-form-item label="工作地址："
                                prop="workAddr">
                    <el-input @click="showMap('工作地址',ruleForm.workAddr)"
                              v-model="ruleForm.workAddr"
                              placeholder="请选择工作地址"
                              clearable />
                  </el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="招聘数量："
                                prop="neededNum">
                    <el-input v-model="ruleForm.neededNum"
                              @input="ruleForm.neededNum = $input.inputLimit('D10009',ruleForm.neededNum)"
                              placeholder="请输入招聘数量"
                              clearable></el-input> </el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="支持少数民族："
                                prop="nationalityStatus">
                    <el-radio-group v-model="ruleForm.nationalityStatus"
                                    class="ml-4">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                      <el-radio :label="2">排除彝、回、维、藏</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <el-form-item label="是否保岗："
                                  prop="protectWhether">
                      <el-radio-group v-model="ruleForm.protectWhether"
                                      class="ml-4">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <div class="flex1 ml40"
                         v-if="ruleForm.protectWhether == 1">
                      <el-form-item label=""
                                    label-width="0"
                                    prop="protectDay">
                        <el-input v-model="ruleForm.protectDay"
                                  clearable
                                  placeholder="请填写保岗天数，最大不超过7天">

                        </el-input>
                      </el-form-item>
                    </div>

                  </div>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="开启直接面试："
                                prop="whetherDirectInterview">
                    <el-radio-group v-model="ruleForm.whetherDirectInterview"
                                    class="ml-4">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="职位福利："
                                prop="welfare">
                    <el-checkbox-group border
                                       class="flex_wrap"
                                       v-model="ruleForm.welfare">
                      <div v-for="i in positionWelfareCheckbox"
                           class="mr30 flex"
                           :key="i.id">
                        <el-checkbox :key="i.id"
                                     :label="i.id">
                          {{ i.dictValue }}
                        </el-checkbox>
                        <div class="flex_c">
                          <el-icon v-if="i.companyId"
                                   @click.stop="deleteWelfare(i.id)"
                                   size="16"
                                   class="ml10 cup"
                                   color="#f56c6c">
                            <Close />
                          </el-icon>
                        </div>
                      </div>
                      <el-icon class="ml20 mt8 cup"
                               @click="saveWelfare"
                               size="20">
                        <Plus />
                      </el-icon>
                    </el-checkbox-group>

                  </el-form-item>
                </el-col>
                <el-col :span="20"
                        v-if="queryData.type == 1"
                        class="dkzcBox">
                  <el-form-item label="打卡政策："
                                prop="">
                    <div class="dkzc w100 mb20"
                         v-for="(i,k) in ruleForm.list"
                         :key="i">
                      <el-col :span="5">
                        <el-form-item label="在岗"
                                      :label-width="$px2rem('60px')"
                                      :prop="'list.'+k+'.expenseDay'"
                                      :rules="rules.expenseDay">
                          <el-input placeholder="请输入天数"
                                    @input="i.expenseDay = $input.inputLimit('D10009',i.expenseDay)"
                                    v-model="i.expenseDay">
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <div class="ml10 mr10">天返</div>
                      <el-col :span="4">
                        <el-form-item label=""
                                      label-width=""
                                      :prop="'list.'+k+'.expenseAmount'"
                                      :rules="rules.expenseAmount">
                          <el-input placeholder="请输入费用"
                                    @input="i.expenseAmount = $input.inputLimit('D10009',i.expenseAmount)"
                                    v-model="i.expenseAmount">
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <div class="ml10"> 元</div>
                      <div class="ml20 cup"
                           @click="ruleForm.list.splice(k,1)"
                           v-if="k != 0">
                        <el-icon color="red"
                                 class="mt10"
                                 size="20">
                          <Close />
                        </el-icon>
                      </div>
                    </div>

                  </el-form-item>
                  <div class="btnAdd">
                    <el-button v-preventReClick
                               plain
                               @click="ruleForm.list.push({
                               expenseAmount: '',
                                expenseDay: '',
                             })"
                               type="primary">
                      <el-icon class="mr10">
                        <Plus />
                      </el-icon>添加政策</el-button>
                  </div>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="职位描述："
                                prop="remark">
                    <div id="refEditorBox">
                      <Editor ref="EditorBox"
                              @changeEditor="changeEditor"></Editor>
                    </div>
                  </el-form-item></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="工作环境图："
                                prop="">
                    <div class="workimgtitle">
                      支持5张图片上传，视频限制上传大小20M以下
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label=" 面试要求："
                                prop="interviewRequire">
                    <el-input v-model="ruleForm.interviewRequire"
                              placeholder="请输入面试要求"
                              clearable />
                  </el-form-item></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label=""
                                prop="">
                    <uploadImg :showNum="5"
                               :uploadImgList="ruleForm.imgs"
                               @changeUploadImgList="changeUploadImgList" />
                  </el-form-item>
                </el-col>
              </el-row>

            </div>
          </div>
        </div>
      </el-form>
      <chooseAddress ref="chooseAddress"
                     @mapData="mapData"
                     :type="mapType"></chooseAddress>
    </div>
  </div>
</template>

<script>
import chooseAddress from "@/components/map.vue";
import Editor from '@/components/Editor.vue'
import {
  defineComponent,
  onMounted,
  reactive,
  getCurrentInstance,
  ref,
  toRefs,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
export default defineComponent({
  components: {
    chooseAddress,
    Editor,
  },
  setup () {
    const app = getCurrentInstance()?.proxy;
    const router = useRouter();
    const route = useRoute();
    const initState = () => {
      return {
        queryData: {
          type: 0
        },
        positionSalary: [],
        positionAge: [],
        positionYear: [],
        positionDayMoney: [],
        positionWelfareCheckbox: [],
        Editor1Show: false,
        companyType: null,
        childCompanyIdType: null,
        boxTitle: "创建职位",
        ZD: [],
        mapType: null,
        chooseAddressShow: false,
        options: {
          childCompanyId: [],
          workTypeId: [
            { value: "长白班", label: "长白班" },
            { value: "两班倒", label: "两班倒" },
          ],
          type: [{ value: "类型1", label: "类型1" }],
        },
        checkboxList: [
          { label: "包吃", id: 1, state: false },
          { label: "包住", id: 2, state: false },
          { label: "交通补助", id: 3, state: false },
          { label: "餐补", id: 4, state: false },
          { label: "花费补贴", id: 5, state: false },
          { label: "加班补助", id: 6, state: false },
          { label: "租房补助", id: 7, state: false },
          { label: "五险", id: 8, state: false },
          { label: "周末双休", id: 9, state: false },
          { label: "月休2天", id: 10, state: false },
          { label: "月休4天", id: 11, state: false },
        ],

        ruleForm: {
          whetherDirectInterview: 1,
          protectWhether: 1,
          list: [
            {
              expenseAmount: '',
              expenseDay: '',
            }
          ],
          nationalityStatus: '',
          salary: '',
          age: '',
          experienceNeeded: '',
          employmentTime: "",
          salaryType: "",
          city: "",
          district: "",
          province: "",
          imgs: [],
          name: "",
          typeId: "",
          endYear: "",
          startYear: "",
          startAge: "",
          endAge: "",
          salaryRange: "",
          workAddr: "",
          workAddrLongitude: null,
          workAddrLatitude: null,
          workTypeId: "",
          childCompanyId: "",
          workAddr: "",
          neededNum: "",
          meetAddr: "",
          meetAddrLongitude: null,
          meetAddrLatitude: null,
          welfare: [],
          remark: "",
          interviewRequire: "",
        },
        rules: {
          expenseDay: [
            { required: true, message: "请输入天数", trigger: "blur" },
          ],
          nationalityStatus: [
            { required: true, message: "请选择少数民族", trigger: "change" },
          ],
          expenseAmount: [
            { required: true, message: "请输入费用", trigger: "blur" },
          ],
          protectWhether: [
            { required: true, message: "请选择保岗", trigger: "blur" },
          ],
          whetherDirectInterview: [
            { required: true, message: "请选择是否开启直接面试", trigger: "blur" },
          ],
          experienceNeeded: [
            { required: true, message: "请选择工作经验", trigger: "blur" },
          ],
          age: [
            { required: true, message: "请选择年龄要求", trigger: "blur" },
          ],
          salary: [
            { required: true, message: "请选择薪资范围", trigger: "blur" },
          ],
          name: [
            { required: true, message: "请输入职位名称", trigger: "blur" },
          ],
          employmentTime: [
            { required: true, message: "请输入用工时间", trigger: "blur" },
          ],
          salaryType: [
            { required: true, message: "请选择薪资结算方式", trigger: "blur" },
          ],
          typeId: [
            { required: true, message: "请选择职位类型", trigger: "blur" },
          ],
          startYear: [
            { required: true, message: "请选择最大工作经验", trigger: "blur" },
          ],
          endYear: [
            { required: true, message: "请选择最小工作经验", trigger: "blur" },
          ],
          startAge: [
            { required: true, message: "请选择最小年龄", trigger: "blur" },
          ],
          endAge: [
            { required: true, message: "请选择最大年龄", trigger: "blur" },
          ],
          salaryStart: [
            { required: true, message: "请输入最小薪资", trigger: "blur" },
          ],
          salaryEnd: [
            { required: true, message: "请输入最大薪资", trigger: "blur" },
          ],
          workAddr: [
            { required: true, message: "请选择工作地址", trigger: "blur" },
          ],
          neededNum: [
            { required: true, message: "请输入招聘数量", trigger: "blur" },
          ],
          workTypeId: [
            { required: true, message: "请选择班次", trigger: "blur" },
          ],
          childCompanyId: [
            { required: true, message: "请选择所属子企业", trigger: "blur" },
          ],
          workAddr: [
            { required: true, message: "请选择工作城市", trigger: "blur" },
          ],
          meetAddr: [
            { required: true, message: "请选择面试地址", trigger: "blur" },
          ],
          welfare: [
            { required: true, message: "请选择职位福利", trigger: "blur" },
          ],
          remark: [
            { required: true, message: "请输入职位描述", trigger: "blur" },
          ],
          imgs: [
            { required: true, message: "请上传工作环境图", trigger: "blur" },
          ],
        },
      };
    };
    const state = reactive(initState());
    onMounted(() => {

      // let option1 = JSON.parse(localStorage.getItem('positionSalary'))
      // option1.forEach(rs => {
      //   let start = rs.dictValue.slice(0, rs.dictValue.indexOf('-'))
      //   let end = rs.dictValue.slice(rs.dictValue.indexOf('-') + 1)
      //   if (end == '99999') {
      //     state.positionSalary.push({
      //       value: rs.dictValue,
      //       label: `${start}以上`
      //     })
      //   } else if (end == '88888') {
      //     state.positionSalary.push({
      //       value: rs.dictValue,
      //       label: `不低于${start}`
      //     })
      //   } else {
      //     state.positionSalary.push({
      //       value: rs.dictValue,
      //       label: rs.dictValue
      //     })
      //   }
      // })

      let option2 = JSON.parse(localStorage.getItem('positionAge'))
      option2.forEach(rs => {
        let start = rs.dictValue.slice(0, rs.dictValue.indexOf('-'))
        let end = rs.dictValue.slice(rs.dictValue.indexOf('-') + 1)
        if (end == '99') {
          state.positionAge.push({
            value: rs.dictValue,
            label: `${start}以上`
          })
        } else if (start == '0') {
          state.positionAge.push({
            value: rs.dictValue,
            label: `${end}以下`
          })
        } else {
          state.positionAge.push({
            value: rs.dictValue,
            label: rs.dictValue + '岁'
          })
        }
      })
      state.positionYear = JSON.parse(localStorage.getItem('positionWorkYear'))
      let option4 = JSON.parse(localStorage.getItem('positionDayMoney'))
      option4.forEach(rs => {
        let start = rs.dictValue.slice(0, rs.dictValue.indexOf('-'))
        let end = rs.dictValue.slice(rs.dictValue.indexOf('-') + 1)
        if (end == '99999') {
          state.positionDayMoney.push({
            value: rs.dictValue,
            label: `${start}元以上/每小时`
          })
        } else {
          state.positionDayMoney.push({
            value: rs.dictValue,
            label: rs.dictValue + '元/小时'
          })
        }
      })


      state.ZD = app.$store().$state.ZD;
      if (!app.$store().$state.ZD.positionType) {
        methods.getZDData();
        state.ZD = app.$store().$state.ZD;
      }
      if (route.query.id) {
        methods.getData(route.query.id);
        methods.getChildCompanyByUserId();
        state.boxTitle = "编辑职位";
      }
      methods.getPlatWelfareList()
    });
    const methods = {
      deleteWelfare (id) {
        ElMessageBox.confirm("请确认是否删除该福利?", "删除福利", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          app.$get('sys-dict/deleteWelfare?id=' + id).then(res => {
            if (res.code == 200) {
              methods.getPlatWelfareList()
            }
          })
        });

      },
      saveWelfare () {
        ElMessageBox.prompt('请输入福利名称', '添加福利', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "",
          inputPattern: '',
          inputErrorMessage: '请输入福利名称',
        })
          .then((value) => {
            if (value.value == null) {
              return ElMessage.error('请输入福利名称')
            }
            app.$post('sys-dict/saveWelfare', { dictValue: value.value, companyId: app.$route.query.companyId }).then(res => {
              if (res.code == 200) {
                methods.getPlatWelfareList()
              }
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消',
            })
          })
      },
      changeEditor1 (i) {
        // app.$refs.xxx.asd(i)
      },
      changeEditor (i) {
        // if (state.Editor1Show) {
        //   methods.changeEditor1(i)
        // }
        state.ruleForm.remark = i
      },
      getChildCompanyByUserId () {
        app.$http.post("/childCompany/getChildCompanyByUserId").then((res) => {
          if (res.data) {
            state.options.childCompanyId =
              res.data;
          }
        });

      },
      getZDData () {
        const positionTypeData = JSON.parse(
          localStorage.getItem("positionType")
        );
        const positionWelfareData = JSON.parse(
          localStorage.getItem("positionWelfare")
        );
        app.$store().changePositionType(positionTypeData);
        app.$store().changePositionWelfare(positionWelfareData);

      },
      getPlatWelfareList () {
        app.$get('sys-dict/getPlatWelfareList?companyId=' + app.$route.query.companyId).then(res => {
          if (res.code == 200) {
            state.positionWelfareCheckbox = res.data
          }
        })
      },
      getData (id) {

        app.$http.get("/position/getById?id=" + id).then((res) => {
          res.data.imgs = res.data.imgs ? JSON.parse(res.data.imgs) : '';
          res.data.welfare = JSON.parse(res.data.welfare);
          if (res.data) {
            state.ruleForm.age = app.$filter.position91011('年龄要求', res.data.startAge, res.data.endAge)
            // state.ruleForm.salary = app.$filter.position91011('薪酬范围', res.data.salaryStart, res.data.salaryEnd)
            state.ruleForm = Object.assign(state.ruleForm, res.data);
            app.$refs.EditorBox.valueHtml = res.data.remark;
            if (state.ruleForm.expenseTemplateType == 1) {
              state.queryData.type = 1
              methods.sysexpensekind()
            }
            state.Editor1Show = true
          }
        });
      },
      sysexpensekind () {
        app.$get('sysexpensekind/queryByPid?pid=' + route.query.id).then(res => {
          if (res.data) {
            state.ruleForm.list = res.data
          }
        })
      },
      mapData (data, type) {
        console.log(data, '-');
        if (type == "面试地址") {
          state.ruleForm.meetAddr = data.name;
          state.ruleForm.meetAddrLongitude = data.lng;
          state.ruleForm.meetAddrLatitude = data.lat;
          state.ruleForm.meetAddrCity = data.city;
          state.ruleForm.meetAddrDistrict = data.district;
          state.ruleForm.meetAddrProvince = data.province;
          return;
        }
        if (type == "工作地址") {
          state.ruleForm.workAddr = data.name;
          state.ruleForm.workAddrLongitude = data.lng;
          state.ruleForm.workAddrLatitude = data.lat;
          state.ruleForm.workAddrCity = data.city;
          state.ruleForm.workAddrDistrict = data.district;
          state.ruleForm.workAddrProvince = data.province;
          return;
        }
      },
      showMap (type, addr) {
        if (type == '工作地址') {
          if (state.ruleForm.workAddrLongitude && state.ruleForm.workAddrLatitude) {
            app.$refs.chooseAddress.mapCenter = [state.ruleForm.workAddrLongitude, state.ruleForm.workAddrLatitude]
            app.$refs.chooseAddress.inputDetails = addr.slice(addr.lastIndexOf('(') + 1, -1) || ''
          }
        } else {
          if (state.ruleForm.meetAddrLongitude && state.ruleForm.meetAddrLatitude) {
            app.$refs.chooseAddress.mapCenter = [state.ruleForm.meetAddrLongitude, state.ruleForm.meetAddrLatitude]
            app.$refs.chooseAddress.inputDetails = addr.slice(addr.lastIndexOf('(') + 1, -1) || ''
          }
        }
        this.mapType = type;
        app.$refs.chooseAddress.dialogVisible = true;
        app.$refs.chooseAddress.initMap();
      },
      back () {
        router.go(-1);
      },
      submit () {
        let numAge = state.ruleForm.age.indexOf('-')
        state.ruleForm.startAge = Number(state.ruleForm.age.slice(0, numAge))
        state.ruleForm.endAge = Number(state.ruleForm.age.slice(numAge + 1))
        if (Number(state.ruleForm.salaryEnd) < Number(state.ruleForm.salaryStart)) {
          return ElMessage.error('最大薪资不能小于最小薪资')
        }
        if (state.ruleForm.remark == '<p><br></p>') {
          return ElMessage.error('请输入职位描述')
        }
        // let numSalary = state.ruleForm.salary.indexOf('-')
        // state.ruleForm.salaryStart = Number(state.ruleForm.salary.slice(0, numSalary))
        // state.ruleForm.salaryEnd = Number(state.ruleForm.salary.slice(numSalary + 1))
        app.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            const loading = ElLoading.service({
              text: "加载中",
            });
            let url = "/position/add";
            if (route.query.id) {
              url = "/position/update";
            }
            let data = state.ruleForm;
            data.imgs = data.imgs ? JSON.stringify(data.imgs) : '';
            data.welfare = JSON.stringify(data.welfare);
            app.$http.post(url, data).then((res) => {
              if (res.code == 200) {
                ElMessage({
                  message: "成功保存",
                  type: "success",
                });
                router.go(-1);
              }
              if (route.query.id) {
                methods.getData(route.query.id);
                methods.getChildCompanyByUserId();
                state.boxTitle = "编辑职位";
              }
              loading.close();
            })
              .catch(() => {
                loading.close();

              });
          }
        });
      },
      changeUploadImgList (data) {
        state.ruleForm.imgs = data;
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped>
.salaryInputBox {
  width: 160px !important;
}
.dkzcBox {
  position: relative;
  .btnAdd {
    position: absolute;
    top: 0;
    left: 70%;
  }
  .dkzc {
    display: flex;
    align-items: center;
  }
}
.editorTable {
  margin-top: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  ::v-deep(.w-e-toolbar) {
    display: none;
  }
  ::v-deep(.EditorClass) {
    height: 100% !important;
  }
}
.add {
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 1);
  // height: 100%;
  padding: 30px 40px;
  box-sizing: border-box;
  .demo-ruleForm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .top {
    .ruturn {
      color: rgba(121, 121, 121, 1);
      font-size: 16px;
      position: relative;
      margin-left: 10px;
      margin-top: -2px;
    }
    .ruturn::before {
      content: '';
      position: absolute;
      left: 50px;
      top: 4px;
      width: 1px;
      height: 16px;
      background: rgba(121, 121, 121, 0.8);
    }
    .left {
      align-items: center;
    }
    .title {
      color: rgb(83, 83, 83);
      font-size: 16px;
      margin-left: 40px;
      font-weight: bold;
    }
  }
  .content {
    width: 100%;
    margin-top: 20px;
    height: 100%;
    flex: 1;
    .left {
      overflow: hidden;
      width: 360px;
      height: 100%;
      background-color: rgba(242, 242, 247, 0.33);
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      // align-items: center;
      // justify-content: center;
      color: rgb(174, 174, 178);
      font-size: 16px;
    }
    .right::-webkit-scrollbar {
      width: 8px;
    }
    .right::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #ccc;
    }
    .right::-webkit-scrollbar-track {
      border-radius: 0;
      background: #f5f5f5;
    }

    .right {
      flex: 1;
      padding: 26px;
      overflow: auto;
      margin-left: 18px;
      border-radius: 5px;
      background-color: rgba(242, 242, 247, 0.33);
      .formBox {
        .workimgtitle {
          color: #969696;
          font-size: 14px;
        }
        ::v-deep(.el-row) {
          margin-bottom: 10px;
        }
        .addImg {
          width: 100px;
          height: 100px;
          margin-left: 100px;
          border-radius: 2px;
          text-align: center;
          line-height: 100px;
          font-size: 26px;
          cursor: pointer;
          background-color: rgba(255, 255, 255, 1);
        }
      }
    }
    ::v-deep(.el-select) {
      width: 100%;
    }
  }
}
</style>
